<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>10-兄弟组件之间数据交互</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <!-- 5： 挂载组件渲染查看效果， 点击A组件，能将B组件中的值累加 -->
      <son-a></son-a>
      <son-b></son-b>
      <br />
      <!-- 6：知道了兄弟组件的相互传值，如何删除事件中心的自定义事件处理函数呢？ -->
      <!-- 6.1：父组件的事件处理函数中，可以使用eventHub.off解绑指定的自定义事件处理函数 -->
      <button @click="removeEvent">{{fInfo}} - 点击解绑</button>
    </div>
    <script>
      // 1： 通过new实例，创建了一个事件中心
      var eventHub = new Vue();
      Vue.component('sonA', {
        data: function () {
          return {
            numA: 0,
          };
        },
        template: `
        <div>
          <div>sonA: {{numA}}</div>
          // 2：触发自己的点击事件
          <button @click="handle1">点击numA - 改变numB</button>
        </div>
          `,
        methods: {
          handle1: function () {
            // 3：自己事件处理函数中，通过eventHub.$emit 发布自定义事件numa-count，并传递了实参10，
            eventHub.$emit('numa-count', 10);
          },
        },
      });

      Vue.component('sonB', {
        data: function () {
          return {
            numB: 0,
          };
        },
        template: `
          <div>
            <div>sonB: {{numB}}</div>  
          </div>
        `,
        methods: {},
        mounted: function () {
          // 4：兄弟组件B，通过eventHub.$on那到了兄弟组件A传过来的事件处理函数，val就是形参
          // 4.1：此时组件A的点击事件，就能改变组件B中值
          eventHub.$on('numa-count', (val) => {
            this.numB += val;
          });
        },
      });

      var vm = new Vue({
        el: '#app',
        data: {
          fInfo: '大明爸爸',
        },
        methods: {
          // 6.2：通过eventHub.off解绑子组件的自定义事件处理函数，此时点击子组件的累加，是没任何反应了
          removeEvent: function () {
            eventHub.$off('numa-count');
          },
        },
      });
    </script>
  </body>
</html>
